<template>
  <div class="card">
    <h2>计数器</h2>
    <div class="counter-display">
      <span class="count">{{ count }}</span>
    </div>
    <div class="counter-controls">
      <button @click="decrement" class="btn btn-danger">-</button>
      <button @click="reset" class="btn btn-secondary">重置</button>
      <button @click="increment" class="btn btn-success">+</button>
    </div>
    <div class="counter-info">
      <p>当前计数: {{ count }}</p>
      <p>是否为偶数: {{ isEven ? '是' : '否' }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 响应式数据
const count = ref(0)

// 计算属性
const isEven = computed(() => count.value % 2 === 0)

// 方法
const increment = () => {
  count.value++
}

const decrement = () => {
  count.value--
}

const reset = () => {
  count.value = 0
}
</script>

<style scoped>
.card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
}

.card h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
  font-size: 1.5rem;
}

.counter-display {
  text-align: center;
  margin-bottom: 20px;
}

.count {
  font-size: 4rem;
  font-weight: bold;
  color: #667eea;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.counter-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.btn {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 60px;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.btn-success {
  background: #28a745;
  color: white;
}

.btn-danger {
  background: #dc3545;
  color: white;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.counter-info {
  text-align: center;
  color: #666;
  font-size: 0.9rem;
}

.counter-info p {
  margin: 5px 0;
}
</style> 